{% extends 'quiz/base.html' %}
{% block nav %}
<body>

<div class="container">
	<div style="margin-top:10px" class="panel panel-primary">
		<div style="text-align:left;font-size:25px;font-family:arial black"class="panel-heading">User Dashboard</div>
	</div>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#Profile">Profile</a></li>
    <li><a data-toggle="tab" href="#Instructions">Instructions</a></li>
    <li><a data-toggle="tab" href="#YourQuiz">Your Exam</a></li>
    <li><a data-toggle="tab" href="#ContactUs">Contact Us</a></li>

    <li style="float:right"><a href="{% url 'home:log' %}">Logout</a></li>
  </ul>


  <div class="tab-content">

      <div id="Home" class="tab-pane fade in active">
         <h2>Welcome to OES!</h2>
         <h3>About the Application:</h3>
         <p>This is an online examination system application built using Django, HTML, CSS and JavaScript.</p>
         <br>
         <h3>Features:</h3>
           <p>Register and attempt exams from anywhere in the world. You just need a mobile/laptop/PC with stable internet connection. Thats all you need.</p>
           
           <h4>Highlights-</h4>
           <p>Personalised dashboard for each user.
           <br>
           Detailed Results.
           <br>
           Safe, Secure and Reliable.</p>
           <br>
           <h3>About us:</h3>
           <p>405:Found is a team of 3 ISE undergrads at CMRIT, Bangalore.</p>
           <br>                          
      </div>
  
      <div id="Instructions" class="tab-pane fade">
        <h2>Instructions</h2>
        <h3>A. General Instructions:</h3>
        <ol>
          <li>The examination will comprise of Objective type Multiple Choice Questions (MCQs)</li>
          <li>All questions are compulsory.</li>
          <li>There are no choices in questions.</li>
          <li>The exam will be of 2 hours.</li>
          <li>For every correct answer you will get 3 marks.</li>
          <li>For every wrong answer 1 marks will be deducted.</li>
        </ol>
        <br>
        <h3>B. Information & Instructions:</h3>
        <ol>
          <li>Every student will take the examination on a Laptop/Desktop/Smart Phone.</li>
          <li>Students are requested to close all the tabs and windows before starting the test.</li>
          <li>The students just need to click on the Right Choice / Correct option from the
            multiple choices /options given with each question. For Multiple Choice Questions,
            each question has four options, and the candidate has to click the appropriate
            option.</li>  
        </ol>                           
      </div>
   
      <div id="ContactUs" class="tab-pane fade">
         <h2>Contact Us</h2>
         <div class="contact-agileinfo">
           <div class="col-md-7 contact-form wthree">
             <form action="#" method="post">
               <input type="text" name="Name" placeholder="Name" required="">
               <input class="email" type="email" name="Email" placeholder="Email" required="">
               <br>
               <br>
               <textarea placeholder="Message" name="Message" required="" rows="16" cols="60"></textarea>
               <br>
               <input type="submit" value="SUBMIT">
             </form>
          </div>
          <div class="col-md-4 contact-right wthree">
             <div class="contact-text w3-agileits">
               <h4>GET IN TOUCH:</h4>
               <p><i class="fa fa-map-marker"></i> Bangalore, India</p>
               <p><i class="fa fa-phone"></i> Telephone : +91 xxx xxx xxxx </p>
               <p><i class="fa fa-envelope-o"></i> Email : <a href="mailto:example@mail.com">found405@gmail.com</a></p> 
             </div> 
          </div> 
        </div>
      </div>

      <div id="Profile" class="tab-pane fade">
         <h2>{{ user.username }}</h2>
       <table class="table">
         <thead>
           <tr>
           <th>Id</th>
           <th>Username</th>
           <th>First Name</th>
           <th>Last Name</th>
           <th>Email</th>
           </tr>
         </thead>
               <tbody>
                   <tr>
                       <td>{{ user.id }}</td>
                       <td>{{ user.username }}</td>
                       <td>{{ user.first_name}}</td>
                       <td>{{ user.last_name}}</td>
                       <td>{{ user.email }}</td>
                   </tr>
               </tbody>
       </table>
      </div>

      <div id="YourQuiz" class="tab-pane fade">
      <center><h4 style="color:#286090">Time: 2 Hour</h4></center>
        <div class="form-group cl-md-4">
            {% if messages %}
                <ul class="message">
                    {% for message in messages %}
                        <li class="alert alert-danger">{{ message }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
      <center><button type="button" class="btn btn-primary" data-toggle="tab" href="#select">Start Exam</button></center>

		<div class="col-sm-4"></div>
			<div class="col-sm-4"><br>
			  <div id="select" class="tab-pane fade">

				<form action="" method="post">
                {% csrf_token %}
				<select class="form-control" id="" name="cat">
					<option disabled>Select Subject</option>
                    {% for s in subject%}
					<option value="{{ s.id }}">{{ s.sub }}</option>
                    {% endfor %}
				</select><br>
				<center><input type="submit"  name="send" value="Start" class="btn btn-primary"/></center>
				 </form>


				</div>
			</div>
		<div class="col-sm-4"></div>
	    </div>
  </div>
</div>

</body>
{% endblock %}
